@Component({
  // REQUIRED
  selector: 'app-user-card',       // CSS selector: element/attr/class
  templateUrl: './user-card.html',  // OR template: `...` inline
  styleUrls: ['./user-card.scss'],  // OR styles: [`...`] inline

  // CHANGE DETECTION
  changeDetection: ChangeDetectionStrategy.OnPush, // PERFORMANCE!

  // ENCAPSULATION
  encapsulation: ViewEncapsulation.Emulated, // default: adds unique attrs
  // ViewEncapsulation.None   → styles are global
  // ViewEncapsulation.ShadowDom → real shadow DOM

  // STANDALONE (Angular 14+)
  standalone: true,
  imports: [CommonModule, RouterModule],  // for standalone

  // HOST
  host: { 'class': 'my-component', '(click)': 'onClick()' },

  // ANIMATIONS
  animations: [trigger('fadeIn', [...])],
})

// Basic
@Input() title: string = '';

// With alias (parent uses 'data', internally it's 'item')
@Input('data') item!: User;

// Required (Angular 16+) — throws error if not passed
@Input({ required: true }) userId!: string;

// Transform (auto-convert string → number from template)
@Input({ transform: numberAttribute }) count!: number;
@Input({ transform: booleanAttribute }) disabled!: boolean;

// With setter — run logic when value changes
private _name = '';
@Input()
set name(val: string) {
  this._name = val.trim().toUpperCase();
}
get name() { return this._name; }

// Signal input (Angular 17+)
count = input(0);           // optional, default=0
name  = input.required<string>();  // required signal input

// Child component
export class UserCardComponent {
  @Output() selected = new EventEmitter<User>();
  @Output() deleted = new EventEmitter<string>();  // emit ID

  onSelect(user: User) {
    this.selected.emit(user);
  }
}

// Parent template
<app-user-card
  (selected)="handleSelect($event)"
  (deleted)="removeUser($event)"
/>

// Parent component
handleSelect(user: User) { /* $event is the User object */ }

// output() — Signal API (Angular 17+)
export class NewCardComponent {
  selected = output<User>();
  onSelect(u: User) { this.selected.emit(u); }
}

export class ParentComponent implements AfterViewInit {
  // Get child COMPONENT instance
  @ViewChild(ChildComponent) child!: ChildComponent;

  // Get DOM element via template ref
  @ViewChild('myInput') inputEl!: ElementRef<HTMLInputElement>;

  // All matching children (plural)
  @ViewChildren(ChildComponent) children!: QueryList<ChildComponent>;

  // NOT available in constructor or ngOnInit!
  ngAfterViewInit() {
    this.inputEl.nativeElement.focus();  // ✅ Safe here
    this.child.someMethod();
  }
}

// ContentChild: content projected via <ng-content>
@ContentChild(HeaderComponent) header!: HeaderComponent;
// Available in ngAfterContentInit()

<!-- card.component.html -->
<div class="card">
  <div class="card-header">
    <ng-content select="[card-title]"></ng-content>  <!-- named slot -->
  </div>
  <div class="card-body">
    <ng-content></ng-content>  <!-- default slot -->
  </div>
</div>

<!-- Parent usage -->
<app-card>
  <h2 card-title>My Title</h2>  <!-- goes to named slot -->
  <p>This goes in the default slot</p>
</app-card>

<!-- ngTemplateOutlet: dynamic templates -->
<ng-container *ngTemplateOutlet="myTemplate; context: {$implicit: item}">
</ng-container>

<!-- *ngIf (old) / @if (new Angular 17+) -->
<div *ngIf="isLoggedIn; else guestBlock">Welcome!</div>
<ng-template #guestBlock><p>Please login</p></ng-template>

@if (isLoggedIn) { <p>Welcome!</p> } @else { <p>Login</p> }

<!-- *ngFor / @for -->
<li *ngFor="let item of items; let i=index; trackBy: trackById">
  {{i}}: {{item.name}}
</li>

@for (item of items; track item.id) {
  <li>{{item.name}}</li>
} @empty { <p>No items</p> }

<!-- *ngSwitch / @switch -->
<div [ngSwitch]="status">
  <p *ngSwitchCase="'active'">Active</p>
  <p *ngSwitchDefault>Unknown</p>
</div>

<!-- [ngClass] — dynamic class binding -->
<div [ngClass]="{'active': isActive, 'disabled': !enabled}">
<div [ngClass]="getClasses()">  <!-- method returning object/array/string -->

<!-- [ngStyle] — dynamic inline styles -->
<div [ngStyle]="{'color': textColor, 'font-size.px': fontSize}">

<!-- [class.xxx] — cleaner single class binding -->
<div [class.active]="isActive" [class.error]="hasError">

<!-- [style.xxx] — cleaner single style binding -->
<div [style.color]="primaryColor" [style.fontSize.px]="size">

<!-- ngModel — two-way binding (needs FormsModule) -->
<input [(ngModel)]="username" (ngModelChange)="onNameChange($event)">

@Directive({
  selector: '[appHighlight]',  // used as attribute
  standalone: true
})
export class HighlightDirective {
  @Input('appHighlight') color = 'yellow';
  @Input() defaultColor = 'white';

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  // HostListener: listen to DOM events on the host element
  @HostListener('mouseenter') onMouseEnter() {
    this.highlight(this.color);
  }
  @HostListener('mouseleave') onMouseLeave() {
    this.highlight(this.defaultColor);
  }

  private highlight(color: string) {
    // ✅ Use Renderer2, NOT direct DOM — works in SSR!
    this.renderer.setStyle(this.el.nativeElement, 'backgroundColor', color);
  }
}

<!-- Usage -->
<p appHighlight="cyan" defaultColor="white">Hover me!</p>

<!-- #ref on element → get DOM element -->
<input #nameInput type="text">
<button (click)="nameInput.focus()">Focus</button>

<!-- #ref on component → get component instance -->
<app-child #child></app-child>
<button (click)="child.reset()">Reset Child</button>

<!-- ng-template: a lazy template, not rendered by default -->
<ng-template #loadingTpl>
  <div class="spinner">Loading...</div>
</ng-template>

<!-- ng-container: grouping without adding DOM element -->
<ng-container *ngIf="isLoggedIn">
  <app-nav></app-nav>
  <app-header></app-header>
</ng-container>

<!-- Render ng-template dynamically -->
<ng-container *ngTemplateOutlet="loading ? loadingTpl : contentTpl">
</ng-container>

<!-- 1. Interpolation: component → view (one-way) -->
<h1>{{title}}</h1>
<p>{{1 + 1}}</p>  <!-- expressions OK -->
<p>{{user?.name | uppercase}}</p>  <!-- optional chaining + pipe -->

<!-- 2. Property binding: component → view (one-way) -->
<img [src]="imageUrl" [alt]="imageAlt">
<button [disabled]="isLoading">Save</button>
<app-user [user]="currentUser"></app-user>

<!-- 3. Event binding: view → component (one-way) -->
<button (click)="save()">Save</button>
<input (input)="onInput($event)" (blur)="validate()">
<div (keydown.enter)="submit()" (keydown.escape)="cancel()">

<!-- 4. Two-way binding: both directions -->
<input [(ngModel)]="username">
<!-- [(ngModel)] is syntax sugar for: -->
<input [ngModel]="username" (ngModelChange)="username=$event">

<!-- Custom two-way on your own component: -->
<app-counter [(count)]="myCount"></app-counter>
<!-- Requires: @Input() count + @Output() countChange -->

<!-- async pipe: auto-subscribes and unsubscribes! -->
<div *ngIf="user$ | async as user">
  {{user.name}}
</div>

<!-- Multiple async with one subscription -->
<ng-container *ngIf="{users: users$ | async, loading: loading$ | async} as vm">
  <div *ngIf="!vm.loading">
    <div *ngFor="let u of vm.users">{{u.name}}</div>
  </div>
</ng-container>

<!-- Safe navigation operator ?. -->
{{user?.address?.city}}  <!-- won't crash if user is null -->
<p>{{items?.[0]?.name}}</p>

<!-- Non-null assertion -->
{{user!.name}}  <!-- tell TS: "I know this isn't null" -->

// providedIn: 'root' — SINGLETON, app-wide (most common)
@Injectable({ providedIn: 'root' })
export class UserService { ... }

// providedIn: 'any' — one instance per lazy-loaded module
@Injectable({ providedIn: 'any' })
export class CacheService { ... }

// Component-level: new instance per component
@Component({ providers: [FormService] })   // fresh instance each time

// Multiple injection tokens
const API_URL = new InjectionToken<string>('api-url');

// Inject pattern (Angular 14+ — no constructor needed!)
export class UserComponent {
  private userService = inject(UserService);  // ✅ Clean!
  private router = inject(Router);
  private apiUrl = inject(API_URL);
}

@Injectable({ providedIn: 'root' })
export class UserService {
  private http = inject(HttpClient);

  // State: BehaviorSubject holds current value
  private users$ = new BehaviorSubject<User[]>([]);

  // Public read-only observable
  readonly users = this.users$.asObservable();

  loadUsers(): Observable<User[]> {
    return this.http.get<User[]>('/api/users').pipe(
      tap(users => this.users$.next(users)),  // update state
      catchError(err => {
        console.error(err);
        return of([]);  // recover gracefully
      })
    );
  }

  getUserById(id: string): Observable<User> {
    return this.http.get<User>(`/api/users/${id}`);
  }
}

// Subject: no initial value, only future values
const events$ = new Subject<string>();

// BehaviorSubject: has current value, emits it immediately on subscribe
const user$ = new BehaviorSubject<User | null>(null);
user$.getValue();        // get current value synchronously
user$.next(newUser);     // emit new value
user$.asObservable();    // expose as read-only

// ReplaySubject: replays last N values to new subscribers
const history$ = new ReplaySubject<string>(5);  // last 5

// AsyncSubject: only emits LAST value when complete()
const result$ = new AsyncSubject<number>();

// Signal-based (Angular 17+)
const count = signal(0);
const doubled = computed(() => count() * 2);
effect(() => console.log(`Count: ${count()}`));

import { map, filter, switchMap, mergeMap, exhaustMap,
         debounceTime, distinctUntilChanged, catchError,
         takeUntil, takeUntilDestroyed, tap, combineLatest,
         forkJoin, of, from, startWith, withLatestFrom } from 'rxjs';

// TRANSFORMATION
source$.pipe(map(x => x * 2))               // transform each value
source$.pipe(filter(x => x > 0))            // filter values
source$.pipe(tap(x => console.log(x)))        // side effect, don't transform

// FLATTENING (THE IMPORTANT ONES)
// switchMap: cancels previous inner obs, use for search/autocomplete
search$.pipe(switchMap(q => this.api.search(q)))

// mergeMap: runs all in parallel, use when ORDER doesn't matter
ids$.pipe(mergeMap(id => this.api.load(id)))

// concatMap: waits for each, use for sequential operations
actions$.pipe(concatMap(a => this.api.save(a)))

// exhaustMap: ignores new until current completes — use for login button
loginClick$.pipe(exhaustMap(() => this.auth.login(creds)))

// COMBINATION
combineLatest([a$, b$]).pipe(map(([a, b]) => a + b))  // latest of all
forkJoin([api1$, api2$])  // wait for all to complete (like Promise.all)

// TIME
search$.pipe(debounceTime(300), distinctUntilChanged())  // search input!

// CLEANUP — CRITICAL, prevents memory leaks
private destroy$ = new Subject<void>();
ngOnDestroy() { this.destroy$.next(); this.destroy$.complete(); }
source$.pipe(takeUntil(this.destroy$)).subscribe(...)

// Angular 16+ — automatic cleanup via DestroyRef
source$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(...)

// canActivate: block unauthenticated access
export const authGuard: CanActivateFn = (route, state) => {
  const auth = inject(AuthService);
  const router = inject(Router);
  if (auth.isLoggedIn()) return true;
  return router.createUrlTree(['/login'], {
    queryParams: { returnUrl: state.url }
  });
};

// canActivateChild: protects all child routes
export const adminGuard: CanActivateChildFn = () =>
  inject(AuthService).hasRole('admin');

// canDeactivate: warn before leaving with unsaved changes
export const unsavedGuard: CanDeactivateFn<EditComponent> = (component) => {
  if (!component.isDirty) return true;
  return confirm('Unsaved changes. Leave anyway?');
};

// resolve: pre-fetch data before activating route
export const userResolver: ResolveFn<User> = (route) => {
  return inject(UserService).getUserById(route.params['id']);
};
// Access in component: route.snapshot.data['userData']

export class UserComponent {
  private router = inject(Router);
  private route = inject(ActivatedRoute);

  // Navigate programmatically
  goToUser(id: string) {
    this.router.navigate(['/users', id]);
    this.router.navigate(['/search'], {
      queryParams: { q: 'angular' },
      queryParamsHandling: 'merge'  // keep existing params
    });
  }

  // Read route params (reactive — auto-updates)
  userId$ = this.route.paramMap.pipe(
    map(params => params.get('id')!)
  );

  // Read query params
  search$ = this.route.queryParamMap.pipe(
    map(p => p.get('q') ?? '')
  );

  // Snapshot (static — only reads once)
  id = this.route.snapshot.params['id'];

  // Resolved data
  user = this.route.snapshot.data['userData'];

  // Subscribe to navigation events
  constructor() {
    this.router.events.pipe(
      filter(e => e instanceof NavigationEnd)
    ).subscribe(e => console.log(e));
  }
}

// Sync validator function
function noSpacesValidator(control: AbstractControl): ValidationErrors | null {
  if (control.value?.includes(' ')) return { noSpaces: true };
  return null;
}

// Cross-field validator (on FormGroup)
function passwordMatchValidator(group: AbstractControl) {
  const pass = group.get('password')?.value;
  const confirm = group.get('confirmPassword')?.value;
  return pass === confirm ? null : { passwordMismatch: true };
}

// Async validator (e.g. check if username taken)
function usernameAvailable(userService: UserService): AsyncValidatorFn {
  return (control) => timer(300).pipe(
    switchMap(() => userService.checkUsername(control.value)),
    map(taken => taken ? { usernameTaken: true } : null)
  );
}

// Use them
name: ['', [Validators.required, noSpacesValidator],
            [usernameAvailable(this.userService)]]  // 3rd arg = async

{{ title | uppercase }}                        
{{ name | lowercase }}                         
{{ title | titlecase }}                        

{{ price | currency:'INR':'symbol':'1.2-2' }} 
{{ num | number:'1.2-3' }}                     
{{ percent | percent:'1.0-2' }}               

{{ date | date:'dd/MM/yyyy' }}                
{{ date | date:'short' }}                     
{{ date | date:'fullDate' }}                  

{{ obj | json }}                              
{{ array | slice:0:5 }}                       
{{ observable$ | async }}                     
{{ 'hello' | i18nSelect: {m:'Mr',f:'Ms'} }}   
{{ items | keyvalue }}                        

@Pipe({
  name: 'truncate',
  standalone: true,
  pure: true  // default: only recalculates when input REFERENCE changes
  // pure: false → recalculates on EVERY change detection (expensive!)
})
export class TruncatePipe implements PipeTransform {
  transform(value: string, maxLength = 100, suffix = '...'): string {
    if (!value) return '';
    return value.length > maxLength
      ? value.substring(0, maxLength) + suffix
      : value;
  }
}

<!-- Usage -->
{{ description | truncate:50 }}
{{ description | truncate:100:' [more]' }}

export class MyComponent implements
  OnChanges, OnInit, DoCheck, AfterContentInit,
  AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestroy {

  // 1. Called when @Input() values change (even before OnInit)
  ngOnChanges(changes: SimpleChanges) {
    if (changes['userId']?.currentValue) {
      this.loadUser(changes['userId'].currentValue);
    }
  }

  // 2. Called ONCE after first ngOnChanges — your main init hook
  ngOnInit() { this.loadData(); }

  // 3. Every CD cycle (expensive — use sparingly)
  ngDoCheck() { }

  // 4. After projected content (ng-content) init
  ngAfterContentInit() { }

  // 5. After every CD check of projected content
  ngAfterContentChecked() { }

  // 6. After component's VIEW and child views are initialized
  // ✅ @ViewChild properties available HERE
  ngAfterViewInit() { this.chart.render(); }

  // 7. After every check of view and child views
  ngAfterViewChecked() { }

  // 8. Cleanup — unsubscribe, clear timers
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
    clearInterval(this.timer);
  }
}

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserCardComponent {
  // ✅ GOOD: new object reference triggers re-render
  @Input() user!: User;

  // In parent: always create NEW objects/arrays
  updateUser() {
    this.user = { ...this.user, name: 'New Name' };  // ✅ new ref
    // this.user.name = 'New Name'  ← ❌ same ref, won't trigger!
  }
}

export class ApiService {
  private http = inject(HttpClient);

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>('/api/users', {
      params: { page: '1', limit: '20' },
      headers: { 'X-Custom': 'value' }
    });
  }

  // Observe full response (headers, status code, etc)
  getWithHeaders() {
    return this.http.get<User>('/api/me', { observe: 'response' }).pipe(
      tap(resp => {
        console.log(resp.status);         // 200
        console.log(resp.headers.get('X-Token'));
        console.log(resp.body);           // User object
      })
    );
  }

  // Upload with progress
  upload(file: File) {
    const fd = new FormData();
    fd.append('file', file);
    return this.http.post('/api/upload', fd, {
      observe: 'events',
      reportProgress: true
    }).pipe(
      filter(e => e.type === HttpEventType.UploadProgress),
      map(e => Math.round(100 * e.loaded / (e.total ?? 1)))
    );
  }
}